<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jQuery_class_stu/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#afterBtn").on("click", function(){
		//$("셀렉터").after("붙일 내용") : 셀렉터의 다음 형제노드로 붙일 내용을 추가
		//$("#child3").after("<font color='red'>after 추가</font><b>됩니다.</b>");
		//$("#root div:eq(1)").after("aaa");
		//$(붙일내용).insertAfter("셀렉터") : 셀렉터의 다음 형제 노드로 붙일 내용을 추가
		$("<font color='green'>after 추가</font><b>됩니다.</b>").insertAfter("#child3");
	});
	
	$("#beforeBtn").on("click", function(){
		//$(셀렉터).before("붙일 내용") : 셀렉터의 앞(이전) 형제 노드로 붙일 내용을 추가.
		$("#child2").before("before 추가");
		//$("붙일 내용").insertBeore("셀렉터") : 셀렉터의 앞(이전) 형제 노드로 붙일 내용을
		$("<b><i>before추가</i></b>").insertBefore("#child2");
	});
	
	$("#allBtn").one("click", function(){
		$(".child").before("all 추가 입니다.");
	});
});
</script>
</head>
<body>
<div id="root">
	ROOT의 text - 시작	
	<div id="child1" class="child">1번</div>
	<div id="child2" class="child">2번</div>
	<div id="child3" class="child">3번</div>	
	<div id="child4" class="child">4번</div>
	ROOT의 text - 종료
</div>
<button id="afterBtn">after버튼</button>
<button id="beforeBtn">before버튼</button>
<button id="allBtn">all 버튼</button>
</body>
</html>



